<template>
    <el-container>
        <el-header height = 400px id = "logo">
            <img src="../../pictures/logo.png" width="200px" height="160px">
        </el-header>
        <el-main>
            <el-form :model="user" :rules="rules" ref="user" label-width="0px" class="demo-user" size="large" width = "100%" @keyup.enter.native="login">
                <el-form-item prop="name">
                    <el-input placeholder="请输入用户名" v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="button-container">
                        <el-button type="primary" size="large" @click="login">登录</el-button>
                        <el-button type="success" size="large" @click="register">注册</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>

import { userlogin } from '@/api/login.js'

export default {
    data() {
      return {
        user: {
          name: '',
          password: '',
        },
        rules: {
            name: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
            ]
        }
      }
    },
    methods: {
        login() {
            this.$refs.user.validate((valid) => {
                if (valid) {                    
                    userlogin({
                        name: this.user.name,
                        password: this.user.password
                    }).then(result => {
                        if (result.data.code === 1) {
                            console.log('登录成功');
                            localStorage.setItem('token', result.data.data.jwt);
                            localStorage.setItem('UserId', result.data.data.id);
                            window.location.href = '#/home';
                        } 
                        else {
                            console.log('登录失败');
                            alert(result.data.msg);
                        }
                    }).catch(error => {
                        console.error('请求失败:', error);
                    });
                } 
                else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        register() {
            window.location.href = '#/register';
        }
    }
}
</script>

<style>
#logo {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 确保 .el-container 是 flex 容器，如果它不是，可以添加以下样式 */
.el-container {
    display: flex;
    flex-direction: column; /* 使 flex 子项在主轴上为垂直排列 */
    height: 100vh; /* 容器高度为视口的 100% */
}

/* 使 .el-main 也成为 flex 容器，并居中其子元素 */
.el-main {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 限制表单的最大宽度，防止在大屏幕上过宽 */
.demo-user {
    max-width: 350px; /* 可以根据需要调整这个值 */
    width: 100%; /* 表单宽度为 100%，但不会超过 max-width */
}

.button-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 使得按钮中的文字不显示下划线 */
.no-underline {
    text-decoration: none;
    color: inherit; /* 继承父元素的文字颜色 */
}
</style>